<template>
	<view :style="{height:pageHeight}">
		<view v-if="isShow==false">
			<emptyPage :title="defaultTxt"></emptyPage>
			<view class="memberButton" @click="upgradeVIP">升级VIP</view>
			<!-- <view class="memberButton" @click="Recharge">账户充值</view> -->
			<!-- <view class="memberButton" @click="AlipayRecharge">支付宝充值</view> -->
			<view class="memberButton" @click="updatePayPass">修改支付密码</view>
			<view class="memberButton" @click="allOrder">查看订单</view>
		</view>
		<view v-if="isShow==true">
			<view class="person">
				<view class="person_box">
					<view class="personInfoBox">
						<view class="photoBox">
							<image :src="userInfo.genderDescIconBorder" v-if="userInfo.genderDescIconBorder"></image>
							<image :src="userInfo.genderDescIcon" class="memberPhone"></image>
						</view>
						<view class="infoBox">
							<view class="realNameBox">{{userInfo.realName}}
								<image :src="userInfo.lastJoinLevelDescIcon" v-if="userInfo.lastJoinLevelDescIcon"
									style="width:86rpx;height:34rpx;margin-left:60rpx;"></image>
								<text style="font-size:26rpx;margin-left:50rpx;"
									v-if="!userInfo.lastJoinLevelDescIcon">{{userInfo.lastJoinLevelDesc}}</text>
							</view>
							<view class="mobileBox">{{userInfo.mobile}}</view>
							<view>荣衔级别：{{userInfo.lastHonorTypeDesc}}</view>
						</view>
						<view class="setUpBox" @click="gotoRouter">
							<image src="/static/images/setUp.png"></image>
						</view>
					</view>
				</view>
				<view class="vipBox" @click="memberApply"></view>
				<view class="Integral_SignIn">
					<view class="IntegralBox" @click="gotoPath('/pages/users/user_omnipotentIntegral/index')">
						<view class="integralSlogan">和好友一起购买好物</view>
						<view class="integralSloganNumber">赠送积分：{{userInfo_shop.all_integral || 0}} <text
								class="iconfont icon-xiangyou"></text></view>
					</view>
					<view class="signInBox" @click="gotoPath('/pages/users/user_sgin/index')">
						<view class="integralSlogan">积分兑换好礼，下单更优惠</view>
						<view class="integralSloganNumber">积分签到 <text class="iconfont icon-xiangyou"></text></view>
					</view>
				</view>
				<!-- @click="gotoPath('/pages/annex/special/index?id=21')" -->
				<view class="liveBroadcast_consultingService">
					<view class="liveBroadcastBox" @click="gotoLiveBox"></view>
					<view class="consultingServiceBox" @click="gotoPath('/pages/annex/special/index?id=20')"></view>
				</view>
				<view class="link_box borderBottom">
					<view class="link_item_box">
						<view class="linkItemName">我的订单</view>
						<view class="linkItemBox" @click="allOrder">全部订单<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
					<view class="linkItemCont">
						<view v-for="(e,i) in orderType" class="width4" :key="i" @click="goRouter1(e)">
							<image :src="e.image"></image>
							<view class="contName">{{e.name}}</view>
						</view>
					</view>
				</view>
				<view class="link_box borderBottom">
					<view class="link_item_box">
						<view class="linkItemName">常用功能</view>
					</view>
					<view class="linkItemCont cygnBox">
						<view v-for="(e,i) in userList" class="width4" :key="i" @click="goRouter(e)">
							<image :src="e.img"></image>
							<view class="contName">{{e.name}}</view>
						</view>
					</view>
				</view>
				<view class="link_box borderBottom">
					<view class="link_item_box">
						<view class="linkItemName">市场推广</view>
					</view>
					<view class="linkItemCont sctgBox">
						<view v-for="(e,i) in marketList" class="width4" :key="i" @click="goRouter(e)">
							<image :src="e.img"></image>
							<view class="contName">{{e.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tishi">
				<directSelling></directSelling>
			</view>
		</view>
		<pageFooter v-if="footerStatus"></pageFooter>
	</view>
</template>

<script>
	import pageFooter from '@/components/pageFooter/index.vue';
	import directSelling from '@/pages/index/components/directSelling'
	import store from '@/store';
	import {
		zhixiao_IFramURl,
		shop_ht
	} from '@/config/app_member.js';
	import {
		getMemberInfo
	} from '@/api/directSelling.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			pageFooter,
			directSelling,
			emptyPage
		},
		data() {
			return {
				// #ifdef H5 || MP
				pageHeight: '667px',
				// #endif
				// #ifdef APP-PLUS
				//pageHeight: app.globalData.windowHeight,
				pageHeight: '667px',
				// #endif
				footerStatus: true,
				userInfo: {},
				isShow: false,
				defaultTxt: "您未登录，请先登录。",
				userInfo_shop: {},
				orderType: [{
					name: "待支付",
					image: "/static/images/dzf.png",
					path: zhixiao_IFramURl + "/personal/myOrder",
					activeTabs: 1,
					isJump: true
				}, {
					name: "待发货",
					image: "/static/images/dfh.png",
					path: zhixiao_IFramURl + "/personal/myOrder",
					activeTabs: 2,
					isJump: true
				}, {
					name: "待收货",
					image: "/static/images/dsh.png",
					path: zhixiao_IFramURl + "/personal/myOrder",
					activeTabs: 3,
					isJump: true
				}, {
					name: "已完成",
					image: "/static/images/ywc.png",
					path: zhixiao_IFramURl + "/personal/myOrder",
					activeTabs: 8,
					isJump: true
				}],
				userList: [{
						name: "查看业绩",
						path: "/pages/directSellingPage/performanceView/index",
						isJump: false,
						img: "/static/images/member_yjck.png"
					},
					{
						name: "电子钱包",
						path: "/pages/electronicWallet/electronicWallet/index",
						isJump: false,
						img: "/static/images/member_dzqb.png"
					}, {
						name: "个人信息",
						img: "/static/images/member_gerx.png",
						path: "/pages/zx_users/personalInformation/index",
						isJump: false
					},
					{
						name: "消费补贴资格",
						path: "/pages/zx_users/seniority/index",
						isJump: false,
						img: "/static/images/member_xfbtzg.png"
					},
					{
						name: "服务留言",
						isJump: false,
						path: "/pages/zx_users/serviceMsg/list",
						img: "/static/images/member_fwly.png"
					},
					{
						name: "设置主账号",
						path: "/pages/zx_users/setMainAccount/index",
						isJump: false,
						img: "/static/images/member_szzzh.png"
					},
					{
						name: "升级店铺",
						img: "/static/images/member_sjdp.png",
						isJump: false,
						//path: zhixiao_IFramURl + "/orderManagement/upgradeFirst",
						path: "/pages/zx_users/upgradeStore/index"

					},
				],
				marketList: [{
						name: "发圈素材",
						img: "/static/images/member_fqsc.png",
						path: "/pages/annex/special/index?id=15",
						isJump: false
					},
					{
						name: "再生技术",
						img: "/static/images/member_zsjs.png",
						path: "/pages/annex/special/index?id=19",
						isJump: false
					},
					{
						name: "新手指引",
						img: "/static/images/member_xszy.png",
						path: "/pages/annex/special/index?id=12",
						isJump: false
					},
				],
				newUserInfo: {}
			};
		},
		created() {
			this.isShow = false;
			//console.log("created");
		},
		mounted() {
			//console.log("mounted");
		},
		onReady() {
			//console.log("onReady");
		},
		onShow() {
			//console.log("onshow");
			this.userInfo_shop = uni.getStorageSync('userInfo_shop');
			let userInfo = {};
			if (!store.state.app.token) {
				this.isShow = false;
				this.defaultTxt = "您未登录，请先登录。";
				toLogin();
			} else {
				getMemberInfo().then((res) => {
					let data = res.data;
					uni.setStorageSync('userInfo', data);
					userInfo = data;
					if (data) {
						//userInfo.lastJoinLevel = -8;
						this.newUserInfo = userInfo;
						if (userInfo.lastJoinLevel < 2) {
							this.isShow = false;
							this.defaultTxt = "您还不是VIP,请进行升级操作。";
							//判断是否进行商城小白升级会员操作
						} else {
							this.isShow = true;
							this.getUserData();
						}
					}
				})
			}


			//uni.setStorageSync('userInfo', data);
			//userInfo=data;

			// uni.navigateTo({
			// 	url:"/pages/users/order_confirm/orderDetails1?orderId=953707&saleType=1"
			// })
		},
		mounted() {
			uni.hideTabBar()
		},
		methods: {
			updatePayPass() {
				uni.navigateTo({
					url: "/pages/zx_users/updatepwd/updatePayPwd"
				})
			},
			AlipayRecharge() {

			},
			upgradeVIP() {
				getMemberInfo().then((res) => {
					let data = res.data;
					uni.setStorageSync('userInfo', data);
					if (data) {
						uni.request({
							url: shop_ht + '/shop_ht/manage/getMemberInfoForTl.do?memberCode=' + data
								.memberCode,
							method: "get",
							success: (userInfo) => {
								let statusData = userInfo.data;
								if (statusData.isPhoneChecked==true) { //已绑定手机号
									uni.navigateTo({
										url: "/pages/zx_users/upgradeVip/index"
									})
								} else { //未绑定
									console.log("未绑定");
									uni.showModal({
										title: '提示',
										content: '为确保本次升级安全性，需通过手机验证码进行支付动态验证。',
										success: function(res) {
											if (res.confirm) {
												uni.navigateTo({
													url: "/pages/users/user_phone/index"
												});
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							}
						})
						// if (data.meta.success) { //绑定手机号
						// 	uni.showModal({
						// 		title: '提示',
						// 		content: '为确保本次升级安全性，需通过手机验证码进行支付动态验证。',
						// 		success: function(res) {
						// 			if (res.confirm) {
						// 				uni.navigateTo({
						// 					url: "/pages/users/user_phone/index"
						// 				});
						// 			} else if (res.cancel) {
						// 				console.log('用户点击取消');
						// 			}
						// 		}
						// 	});
						// } else {
						// 	uni.navigateTo({
						// 		url: "/pages/zx_users/upgradeVip/index"
						// 	})
						//}
					}
				})

			},
			Recharge() {
				let path = zhixiao_IFramURl + "/personal/bankCardDo";
				let name = "银行卡";
				uni.navigateTo({
					url: "/pages/user/memberCenterJumb?path=" + path + "&title=" + name
				});
			},
			getUserData() {
				let _this = this;
				getMemberInfo().then((res) => {
					let data = res.data;
					if (data) {
						// if(data.lastJoinLevelDesc=="普卡"){
						// 	data.lastJoinLevelDescIcon="/static/images/member_pk.png"
						// }else 
						if (data.lastJoinLevelDesc == "VIP") {
							data.lastJoinLevelDescIcon = "/static/images/member_vip.png"
							data.genderDescIconBorder = "/static/images/user_photo.png";
						} else if (data.lastJoinLevelDesc == "钻卡VIP") {
							data.lastJoinLevelDescIcon = "/static/images/memeber_zk.png"
							data.genderDescIconBorder = "/static/images/member_zkBorder.png";
						} else if (data.lastJoinLevelDesc == "至尊VIP") {
							data.lastJoinLevelDescIcon = "/static/images/member_zzk.png"
							data.genderDescIconBorder = "/static/images/member_zzkBorder.png";
						} else if (data.lastJoinLevelDesc == "黄金VIP") {
							data.lastJoinLevelDescIcon = "/static/images/member_jk.png"
							data.genderDescIconBorder = "/static/images/member_jkBorder.png";

						}
						if (data.genderDesc == "男") {
							data.genderDescIcon = "/static/images/member_boy.png"
						} else if (data.genderDesc == "女") {
							data.genderDescIcon = "/static/images/member_nv.png"
						}
						_this.userInfo = data;
						if (_this.userInfo.shopType > 0) {
							this.userList = this.userList.slice(0, this.userList.length - 1);
						}
						uni.setStorageSync('userInfo', data);
						uni.setStorageSync('tab_id', null);
						//判断当前用户是否为小白用户
					}
				}).catch((err) => {
					console.log("是否报错");
					console.log(err);
				})
			},
			gotoLiveBox() {
				let livePath =
					"https://appvszqiduz8584.h5.xiaoeknow.com/v2/course/alive/l_61c2db4ee4b051674c4b5099?app_id=appvszqiduz8584&alive_mode=0&pro_id=&type=2";
				setTimeout(() => {
					// #ifdef H5
					location.href = livePath;
					// #endif
					//#ifdef APP-PLUS
					plus.runtime.openURL(livePath, function(res) {
						//console.log(res);
					});
					// #endif
				}, 100);
			},
			gotoPath(path) {
				uni.navigateTo({
					url: path
				});
			},
			gotoRouter() {
				let path = "/pages/zx_users/updatepwd/index"
				uni.navigateTo({
					url: path
				});
			},
			//会员申请
			memberApply() {
				let path = "/pages/directSellingPage/RegisteredCustomer/RegiestNewFirst"
				uni.navigateTo({
					url: path
				});
			},
			//全部订单
			allOrder() {
				let path = zhixiao_IFramURl + "/personal/myOrder"
				//let path=""
				uni.navigateTo({
					url: "/pages/user/memberCenterJumb?path=" + path + "&title=" + "全部订单" + "&activeTabs=0"
				});
			},
			goRouter(ele) {
				if (ele.isJump == false) {
					uni.navigateTo({
						url: ele.path
					});
				} else {
					uni.navigateTo({
						url: "/pages/user/memberCenterJumb?path=" + ele.path + "&title=" + ele.name
					});
				}
			},
			goRouter1(ele) {
				if (ele.isJump == false) {
					uni.navigateTo({
						url: ele.path
					});
				} else {
					uni.navigateTo({
						url: "/pages/user/memberCenterJumb?path=" + ele.path + "&title=" + ele.name +
							"&activeTabs=" + ele.activeTabs
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.person_box {
		width: 100%;
		height: 442rpx;
		background-image: url(/static/images/user_zx.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding: 50rpx 62rpx;
		padding-top: 123rpx;
		box-sizing: border-box;

		.personInfoBox {
			width: 100%;
			height: auto;
			position: relative;

			.setUpBox {
				width: 34rpx;
				height: 32rpx;
				position: absolute;
				right: 0;
				top: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			>view {
				display: inline-block;
				vertical-align: top;
			}

			.photoBox {
				width: 125rpx;
				height: 142rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
				}

				image.memberPhone {
					width: 118rpx;
					height: 118rpx;
					top: 20rpx;
					left: 4rpx;
				}
			}

			.infoBox {
				margin-left: 23rpx;
				line-height: 46rpx;
				font-size: 25rpx;
				color: #fff;
				margin-top: 20rpx;

				.realNameBox {
					font-size: 38rpx;
					line-height: 55rpx;
					height: 55rpx;
					position: relative;

					image {
						position: absolute;
						top: 10rpx;

					}
				}

				.mobileBox {
					font-size: 26rpx;
				}
			}
		}
	}

	.vipBox {
		width: 607rpx;
		height: 141rpx;
		background-image: url(/static/images/vipBox.png);
		background-repeat: no-repeat;
		background-size: cover;
		margin: 0 auto;
		margin-top: -102rpx;
	}

	.Integral_SignIn {
		width: calc(100% - 50rpx);
		margin-left: 25rpx;
		height: 153rpx;
		margin-bottom: 16rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 12rpx 0 18rpx 0;
		box-sizing: border-box;

		>view {
			height: 100%;
			display: inline-block;
			vertical-align: top;
			padding: 20rpx 25rpx;
			box-sizing: border-box;
		}

		view.IntegralBox {
			border-right: 1px solid rgba(150, 149, 148, 0.2);
			width: calc((100% - 2rpx) / 2 - 30rpx);
		}

		view.signInBox {
			width: calc((100% - 2rpx) / 2 + 30rpx);
		}

		.integralSlogan {
			display: inline-block;
			padding: 0 24rpx 0 14rpx;
			box-sizing: border-box;
			background-image: url(/static/images/Integral_SignIn.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			font-size: 21rpx;
			font-weight: 400;
			line-height: 38rpx;
			color: #fff;
			overflow: hidden;
			height: 38rpx;
		}

		.integralSloganNumber {
			font-size: 26rpx;
			color: #242424;
			font-weight: 500;
			margin-top: 15rpx;

			.iconfont {
				color: #242424;
				font-size: 22rpx;
				font-weight: 600;
				margin-left: 4rpx;
			}
		}
	}

	.liveBroadcast_consultingService {
		width: calc(100% - 50rpx);
		margin-left: 25rpx;
		height: 153rpx;
		margin-bottom: 21rpx;

		>view {
			width: calc((100% - 21rpx) / 2);
			height: 100%;
			display: inline-block;
		}

		>view.liveBroadcastBox {
			margin-right: 21rpx;
			background-image: url(/static/images/member_zbyg.png);
			background-repeat: no-repeat;
			background-size: cover;
		}

		>view.consultingServiceBox {
			background-image: url(/static/images/member_xwzx.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}

	.link_box {
		height: auto;
		width: calc(100% - 50rpx);
		margin-left: 25rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 0;
		padding-bottom: 25rpx;
		box-sizing: border-box;

		.link_item_box {
			display: flex;
			padding: 33rpx 30rpx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;

			.linkItemName {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			.linkItemBox {
				color: #999;
				font-size: 24rpx;

				.iconfont {
					font-size: 24rpx;
				}
			}
		}

		.linkItemCont {
			width: 100%;

			>view.width4 {
				width: 25%;
			}

			>view.width5 {
				width: 20%;
			}

			>view {
				text-align: center;
				display: inline-block;
				vertical-align: middle;

				image {
					width: 48rpx;
					height: 40rpx;
				}

				.contName {
					color: #0B0B0B;
					font-size: 24rpx;
					line-height: 40rpx;
					font-weight: 500;
				}
			}
		}

		.cygnBox {
			>view {
				image {
					width: 48rpx;
					height: 48rpx;
				}

				margin-bottom:40rpx;
			}

			>view:nth-child(5),
			>view:nth-child(6),
			>view:nth-child(7) {
				margin-bottom: 10rpx;
			}
		}

		.sctgBox {
			image {
				width: 47rpx !important;
				height: 47rpx !important;
			}
		}
	}

	.userVIP_Item {
		width: calc(100% - 30rpx);
		height: auto;
		padding: 30rpx 10rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-wrap: wrap;
		margin-left: 15rpx;

		>view {
			width: 25%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			margin-bottom: 40rpx;
			font-size: 26rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.borderBottom {
		margin-bottom: 27rpx;
	}

	.memberButton {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		margin: 50rpx auto;
		text-align: center;
		background: $theme-color;
		border-radius: 35rpx;
		color: #fff;
	}
</style>
